<template>
  <el-card>
    <!--  {{ main }} -->
    <el-form
      ref="form"
      :model="main"
      :rules="rules"
      label-width="80px"
      size="mini"
    >
      <el-form-item label="订单号">
        <el-input v-model="main.orderNo"></el-input>
      </el-form-item>
      <el-form-item label="下单时间" size="mini">
        <el-date-picker
          v-model="main.orderTime"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="main.phone"></el-input>
      </el-form-item>
      <el-form-item label="收货人">
        <el-input v-model="main.consignee"></el-input>
      </el-form-item>
      <el-form-item label="收货地址">
        <el-input v-model="main.deliverAddress"></el-input>
      </el-form-item>
      <el-form-item label="送达时间" size="mini">
        <el-date-picker
          v-model="main.deliveryTime"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="main.remarks"></el-input>
      </el-form-item>
      <el-form-item label="订单金额">
        <el-input v-model="main.orderAmount"></el-input>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="main.orderState" placeholder="请选择活动区域">
          <el-option label="进行中" value="进行中"></el-option>
          <el-option label="处理中" value="处理中"></el-option>
          <el-option label="已完成" value="已完成"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">确定修改</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { detail, editgoods } from '../../api/shop'
export default {
  data() {
    return {
      main: {
        orderNo: '',
        orderTime: '',
        phone: '',
        consignee: '',
        deliverAddress: '',
        deliveryTime: '',
        remarks: '',
        orderAmount: '',
        orderState: ''
      },
      rules: {
        orderNo: [{ required: true, message: '请输入订单号', trigger: 'blur' }],
        orderTime: [
          { required: true, message: '请选择下单时间', trigger: 'change' }
        ],
        phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        consignee: [
          { required: true, message: '请输入收货人', trigger: 'blur' }
        ],
        deliverAddress: [
          { required: true, message: '请输入收货地址', trigger: 'blur' }
        ],
        deliveryTime: [
          { required: true, message: '请输入送达时间', trigger: 'change' }
        ],
        remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }],
        orderAmount: [
          { required: true, message: '请输入订单金额', trigger: 'blur' }
        ],
        orderState: [
          { required: true, message: '请输入订单状态', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // console.log(this.$route.query.id)
    this.orderdetail(this.$route.query.id)
  },
  methods: {
    async orderdetail(id) {
      const data = await detail({ id })
      // console.log(data)
      this.main = data.data
    },
    async onSubmit() {
      const data = await editgoods({
        id: this.main.id,
        orderNo: this.main.orderNo,
        orderTime: this.main.orderTime,
        phone: this.main.phone,
        consignee: this.main.consignee,
        deliverAddress: this.main.deliverAddress,
        deliveryTime: this.main.deliveryTime,
        remarks: this.main.remarks,
        orderAmount: this.main.orderAmount,
        orderState: this.main.orderState
      })
      // console.log(data)
      if (data.code === 0) {
        this.$message({
          message: data.msg,
          type: 'success'
        })
        setTimeout(() => {
          this.$router.push('/order/list')
        }, 1500)
      } else {
        this.$message.error('失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-input,
.el-select {
  width: 220px;
}
/deep/.el-textarea__inner {
  width: 220px;
}
</style>
